<template>
  <div>
    <div v-if="sideTabbar" id="tabbar">
       <Tabbar>
            <TabbarItem link="/" >
                <img src="static/image/bar1.png" slot="icon">
                <span slot="label">首页</span>
            </TabbarItem>
            <TabbarItem link="/Category" >
                 <img src="static/image/type.jpg" slot="icon">
                 <span slot="label">分类</span>
            </TabbarItem>
            <TabbarItem link="/Cart" >
                 <img src="static/image/bar3.png" slot="icon">
                <span slot="label">购物车</span>
            </TabbarItem>
            <TabbarItem link="/Mine/Login" v-if="!isLogin" >
                <img src="static/image/var5.png" slot="icon">
               <span slot="label">我的</span>
            </TabbarItem>
            <TabbarItem link="/Mine" v-if="isLogin" >
                <img src="static/image/var5.png" slot="icon" >
               <span slot="label">我的</span>
            </TabbarItem>
        </Tabbar>
    </div> 
    <keep-alive>
        <transition :name="aniType">
            <router-view></router-view>
        </transition>
    </keep-alive>
  </div>
</template>

<script>
import {Tabbar,TabbarItem} from 'vux';
import {mapState,mapActions} from 'vuex';
export default {
    data(){
        return{
        aniType:"",
        }
    },
    components:{
        Tabbar,
        TabbarItem,
    },
    computed:{
      sideTabbar:function(){
          var path = this.$route.path;
          var deep = path.split("/").length-1;
          return deep == 1;
      },
      ...mapState([
          "isLogin"
        ]),
    },
    mounted:function(){
        this.$store.dispatch("requestIsLogin"); 
    },
    watch: {
        $route(nv, ov) {
            var nLen = nv.path.split("/").length - 1;
            var oLen = ov.path.split("/").length - 1;
            if (nLen >oLen) {
                this.aniType = "pagein";
            } else if (nLen<oLen) {
                this.aniType = "pageout";
            } else {
                this.aniType = "";
            }
        },
    },
}
</script>

<style scoped>
#tabbar{
    width:100%;
    position:fixed;
    bottom: 0;
    left:0;
    z-index: 10;
}


.pagein-enter {
        transform: translate(100%, 0);
    }

    .pagein-enter-active,
    .pagein-leave-active {
        transition: all 0.7s;
        position: absolute;
        width: 100%;
    }

    .pagein-enter-to,
    .pagein-leave {
        transform: translate(0, 0);
    }

    .pagein-leave-to {
        transform: translate(-30%, 0);
    }


    /*页面后退动画*/

    .pageout-leave,
    .pageout-enter-to {
        transform: translate(0, 0);
    }

    .pageout-leave-active,
    .pageout-enter-active {
        transition: all 0.7s;
        position: absolute;
        width: 100%;
       
    }

    .pageout-leave-to {
        transform: translate(100%, 0);
    }

    .pageout-enter {
        transform: translate(-30%, 0);
    }


</style>